<!--
 * @Author: wjc
 * @Date: 2025-06-18 09:09:53
 * @LastEditors: wjc
 * @LastEditTime: 2025-09-19 09:57:06
 * @Description: 
-->
<template>
  <template v-if="showIframe">
    <template v-for="(item, index) in iframeRoutes" :key="item.fullPath">
      <div v-if="canRender(item)" v-show="routeShow(item)" class="relative size-full">
        <NiceSpinner :spinning="showSpinning(index)" />
        <iframe
          :src="item.meta.iframeSrc as string"
          class="size-full"
          @load="hideLoading(index)"
        ></iframe>
      </div>
    </template>
  </template>
</template>
<script lang="ts" setup>
  import type { RouteLocationNormalized } from 'vue-router'

  import { computed, ref } from 'vue'
  import { useRoute } from 'vue-router'

  import { useTabbarStore } from '@nice/hooks'
  import { NiceSpinner } from '@nice/nice-ui'

  defineOptions({ name: 'IFrameRouterView' })

  const spinningList = ref<boolean[]>([])
  const tabbarStore = useTabbarStore()
  const route = useRoute()

  const enableTabbar = computed(() => true)

  const iframeRoutes = computed(() => {
    if (!enableTabbar.value) {
      return route.meta.iframeSrc ? [route] : []
    }
    return tabbarStore.getTabs.filter((tab) => !!tab.meta?.iframeSrc)
  })

  const tabNames = computed(() => new Set(iframeRoutes.value.map((item) => item.name as string)))

  const showIframe = computed(() => iframeRoutes.value.length > 0)

  function routeShow(tabItem: RouteLocationNormalized) {
    return tabItem.name === route.name
  }

  function canRender(tabItem: RouteLocationNormalized) {
    const { meta, name } = tabItem

    if (!name || !tabbarStore.renderRouteView) {
      return false
    }

    if (!enableTabbar.value) {
      return routeShow(tabItem)
    }

    // 跟随 keepAlive 状态,与其他tab页保持一致
    if (!meta?.keepAlive && tabNames.value.has(name as string) && name !== route.name) {
      return false
    }
    return tabbarStore.getTabs.some((tab) => tab.name === name)
  }

  function hideLoading(index: number) {
    spinningList.value[index] = false
  }

  function showSpinning(index: number) {
    const curSpinning = spinningList.value[index]
    // 首次加载时显示loading
    return curSpinning === undefined ? true : curSpinning
  }
</script>
